<script>
import * as echarts from "echarts";
import { COLORLIST } from "@/utils/variate";
function uuid() {
  var d = new Date().getTime();
  if (window.performance && typeof window.performance.now === "function") {
      d += performance.now(); //use high-precision timer if available
  }
  var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
      var r = (d + Math.random() * 16) % 16 | 0;    // d是随机种子
      d = Math.floor(d / 16);
      return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
  });
  return uuid;
}
export default {
  props: {
    serviceData: {
      type: Object,
      default: () => {}
    },
    id: {
      type: String,
      default: () => uuid()
    }
  },
  mounted() {
    this.initValue();
  },
  watch: {
    serviceData: {
      deep: true,
      immediate: true,
      handler() {
        this.initValue();
      },
    },
  },
  methods: {
    initValue() {
      this.$nextTick(() => {
        const chartDom = document.getElementById(this.id);
        const myChart = echarts.init(chartDom);

        const lineData = this.serviceData && Object.entries(this.serviceData).reduce((prev, item) => {
          const key = item[0].slice(0 ,1)
          prev[key] ? prev[key].push(item[1] || 0) : prev[key] = [item[1] || 0]
          return prev
        }, {})

        for (const k in lineData) {
          lineData[k] = lineData[k].map((value, index) => [index + 1, value])
        }

        let option = {
          color: COLORLIST,
          tooltip: {
            axisPointer: {
              type: "cross",
            },
          },
          legend: {
            type: "scroll",
            orient: "vertical",
            align: "left",
            right: "0",
            top: "60",
            itemGap: 14,
            icon: "roundRect",
            itemWidth: 24, //圆点大小
            itemHeight: 4, // 粗细
            width: "100%",
            textStyle: {
              fontSize: 20,
            },
          },
          xAxis: {
            id: "x0",
            type: "value",
            boundaryGap: true,
            // inverse: true,
            minorTick: {
              show: true,
            },
            axisLine: {
              onZero: false,
            },
            axisTick: {
              show: true,
              inside: true,
            },
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontWeight: 700,
                color: "#4c4c4c",
                fontSize: 20,
              },
            },
            splitLine: {
              show: false,
            },
          },
          yAxis: {
            id: "y0",
            type: "value",
            splitNumber: 4,
            minorTick: {
              show: true,
            },
            axisTick: {
              show: true,
              inside: true,
            },
            axisLine: {
              onZero: false,
              show: true,
              lineStyle: {
                color: "black",
              },
            },
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                fontWeight: 700,
                color: "#4c4c4c",
                fontSize: 20,
              },
            },
            splitLine: {
              show: false,
            },
          },
          dataZoom: {
            type: "inside",
            zoomOnMouseWheel: "ctrl",
          },
          series: Object.entries(lineData).map(item => {
            return {
              name: item[0],
              type: 'line',
              data: item[1]
            }
          })
        };

        option && myChart.setOption(option);
      });
    },
  },
};
</script>
<template>
  <div :id="id" style="width: 34vw;height:400px;"></div>
</template>
<style lang="scss" scoped></style>
